<template>
  <div style="border-style:solid;border-width:0.5px;border-color:#ccc;text-align:center">
    <ul style="padding-top: 5%;list-style-type: none;">
      <li style="padding-bottom:20px">
        <el-tag style="font-size:24px" type="success">{{gooItemStatus | formatGooItemSteps}}</el-tag>
      </li>
      <el-popover ref="popover1" placement="right-end" :disabled="popoverUpshelf" trigger="click" content="小主呀,看看当前的商品状态呀,你不是已经上架了嘛？">
      </el-popover>
      <li style="padding-top:10px;padding-bottom:20px">
        <el-button type="primary" style="width:15%" @click="handlerRelease('UP_SHELF')" v-popover:popover1>上架商品</el-button>

      </li>
      <el-popover ref="popover2" placement="right-end" :disabled="popoverDownshelf" trigger="click" content="搞事情嘛？你是没上架就下架呀还是重复点击下架了？">
      </el-popover>
      <li style="padding-top:10px;padding-bottom:20px">
        <el-button type="primary" style="width:15%" @click="handlerRelease('DOWN_SHELF')" v-popover:popover2>下架商品</el-button>
      </li>
    </ul>
  </div>
</template>

<script>
import gooItemApi from '../../api/gooItemApi'
export default {
  data() {
    return {
      gooItemStatus: null,
      gooItemId: null,
      popoverUpshelf: true,
      popoverDownshelf: true
    }
  },
  mounted: function() {
    let gooItem = this.$store.state.gooItem.gooItem;
    if (gooItem) {
      this.gooItemId = gooItem.id;
      this.gooItemStatus = gooItem.status == null ? 'DEVELOPING' : gooItem.status;
    }
  },
  methods: {
    handlerRelease(status) {
      if (status) {
        console.log(status)
        var curStatus = this.gooItemStatus;
        if (status == 'UP_SHELF' && curStatus == status) {
          this.popoverUpshelf = false;
        } else if (status == 'DOWN_SHELF' && curStatus != 'UP_SHELF') {
          this.popoverDownshelf = false;
        } else if (!this.gooItemId){
            this.$notify.error({
              title: '发行失败',
              message: '没有找到商品信息'
            })
        } else {
          gooItemApi.updateStatus(this.gooItemId, status).then((res) => {
            if (res.status == 200) {
              this.$notify({
                title: '成功',
                message: '操作成功',
                type: 'success'
              });
              this.$emit('retrieve-cur-step', 3 )
              gooItemApi.getOne(this.gooItemId).then((res) => {
                    if (res.status == 200 && res.data != '') {
                       this.gooItemStatus = res.data.status;
                    }
                }).catch((err) => {
                    this.$notify.error({
                        title: '获取内容失败',
                        message: err.errors_msg
                    });
                });
            }
          }).catch((err) => {
            this.$notify.error({
              title: '发行失败',
              message: err.errors_msg
            })
          })
        }
      }
    }
  }
}
</script>
